<template>
  <div>
    <div class="announcement-bar" v-if="announcements.length > 0">
      <el-carousel 
        height="60px" 
        indicator-position="none" 
        :interval="3000"
        :autoplay="true"
        direction="vertical"
        class="announcement-carousel"
      >
        <el-carousel-item v-for="announcement in announcements" :key="announcement.id">
          <div class="announcement-item" @click="showAnnouncementDetails(announcement)">
            <el-icon><Bell /></el-icon>
            <span class="announcement-text">{{ announcement.title }}</span>
            <span class="announcement-date">{{ formatDate(announcement.createdTime) }}</span>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="view-all-btn" @click="showAllAnnouncements">
        <el-icon><ArrowRight /></el-icon>
      </div>
    </div>
    
    <!-- 公告列表对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="公告列表"
      width="600px"
      :destroy-on-close="true"
    >
      <div class="announcements-list">
        <el-table :data="allAnnouncements" style="width: 100%" v-loading="loading">
          <el-table-column prop="title" label="标题" min-width="180" />
          <el-table-column prop="createdTime" label="发布时间" width="120">
            <template #default="scope">
              {{ formatDate(scope.row.createdTime) }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-button type="primary" link @click="showAnnouncementDetails(scope.row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[5, 10, 20]"
            layout="total, sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Bell, ArrowRight } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import request from '@/utils/request'

// Data
const announcements = ref([])
const allAnnouncements = ref([])
const dialogVisible = ref(false)
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// Fetch announcements on component mount
onMounted(() => {
  fetchAnnouncements()
})

// Methods
const fetchAnnouncements = async () => {
  try {
    // Get recent active announcements
    const result = await request.get('/announcement/latest?limit=5',null,{
      showDefaultMsg:false,
      onSuccess:(data)=>{
        announcements.value=data||[]
      }
    })
    
  } catch (error) {
    console.error('Failed to fetch announcements:', error)
  }
}

const fetchAllAnnouncements = async () => {
  loading.value = true
  try {
    await request.get('/announcement/page', null, {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value
      },
      showDefaultMsg: false,
      onSuccess: (data) => {
        allAnnouncements.value = data.records || []
        total.value = data.total
      }
    })
  } catch (error) {
    console.error('Failed to fetch all announcements:', error)
  } finally {
    loading.value = false
  }
}

const showAnnouncementDetails = (announcement) => {
  ElMessageBox.alert(announcement.content, announcement.title, {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '我知道了',
    center: true,
    callback: () => {}
  })
}

const showAllAnnouncements = () => {
  dialogVisible.value = true
  fetchAllAnnouncements()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchAllAnnouncements()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchAllAnnouncements()
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  
  const date = new Date(dateString)
  return date.toLocaleDateString()
}
</script>

<style lang="scss" scoped>
.announcement-bar {
  background-color: var(--el-color-primary-light-9);
  border-top: 1px solid var(--el-border-color-light);
  border-bottom: 1px solid var(--el-border-color-light);
  height: 60px;
  overflow: hidden;
  display: flex;
  position: relative;
}

.announcement-carousel {
  width: calc(100% - 40px);
  height: 100%;
}

.view-all-btn {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--el-color-primary-light-8);
  transition: background-color 0.3s;
  
  &:hover {
    background-color: var(--el-color-primary-light-5);
  }
  
  .el-icon {
    font-size: 20px;
    color: var(--el-color-primary);
  }
}

.announcement-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  cursor: pointer;
  
  &:hover .announcement-text {
    color: var(--el-color-primary);
  }
  
  .el-icon {
    font-size: 20px;
    color: var(--el-color-primary);
    margin-right: 10px;
  }
  
  .announcement-text {
    flex: 1;
    font-size: 14px;
    color: var(--el-text-color-primary);
    transition: color 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
  }
  
  .announcement-date {
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }
}

.announcements-list {
  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style> 